<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" media="screen and (min-width:968px)" href="index.css">
  <link rel="stylesheet" media="screen and (max-width:968px)" href="index1.css">
  <link rel="stylesheet" href="../css/swiper-bundle.css">
  <script src="../js/swiper-bundle.js"> </script>
  <script src="../js/jquery-1.12.4.js"></script>
  <script>
  </script>
</head>

<body>
  <div id="box">
    <!-- 导航栏开始 -->
    <div class="head">
      <div class="head-content">
        <div class="head-left">
          <img src="../img/2-min.png">
        </div>
        <div class="head-right">
          <div class="none"><img src="../img/更多.png" alt=""></div>
          <div class="uls">
            <ul>
              <li><a href="">首页</a></li>
              <li><a href="../profile/profile.html">部门概括</a></li>
              <li><a href="../staff/staff.html#one">师资队伍</a></li>
              <li><a href="">思政建设</a></li>
              <li><a href="">红馆</a></li>
              <li><a href="">心理健康教育中心</a></li>
              <li><a href="">教学科研</a></li>
              <li><a href="">学生社团</a></li>
            </ul>
          </div>
          <div class="input">
            <img src="../img/素材_06.jpg" alt="">
            <input type="text" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入关键字搜索">
          </div>
        </div>
      </div>
    </div>
    <!-- 导航栏结束 -->

    <!-- banner图开始 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../img/1-min.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../img/1-min.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../img/1-min.png" alt="">
        </div>
      </div>
      <!-- 如果需要滚动条 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- banner图结束 -->

    <!-- 新闻公告开始 -->
    <div class="news-box">
      <div class="news">
        <div class="news-content">
          XIN WEN GONG GAO1
          <div class="newcolor">新闻公告</div>
        </div>
        <div class="news1">
          <div class="news-left">
            <img class="image3" src="../img/3-min.png" alt="" />
            <div class="none1">
              传承八一精神 凝聚奋进力量
            </div>
          </div>
          <div class="news-right">
            <div class="top">
              “为党育人 为国育才” ——9位法大教师倾情讲述育人故事
            </div>
            <div class="center">
              <div class="border"></div>
              <div class="time">2022-11-02</div>
            </div>
            <div class="bottom">
              三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契...
            </div>
            <div class="bottom-img">
              <div class="bottom-left">
                <img src="../img/4-min.png" alt="" class="img-left">
                <img src="../img/4-min.png" alt="" class="img-right">
              </div>
              <div class="bottom-right">
                <span>1</span>/3
              </div>
            </div>
          </div>
        </div>
        <div class="news1">
          <div class="news-left">
            <img class="image3" src="../img/6-min.png" alt="" />
            <div class="none1">
              传承八一精神 凝聚奋进力量
            </div>
          </div>
          <div class="news-right">
            <div class="top">
              “为党育人 为国育才” ——9位法大教师倾情讲述育人故事
            </div>
            <div class="center">
              <div class="border"></div>
              <div class="time">2022-11-02</div>
            </div>
            <div class="bottom">
              三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契...
            </div>
            <div class="bottom-img">
              <div class="bottom-left">
                <img src="../img/4-min.png" alt="" class="img-left">
                <img src="../img/4-min.png" alt="" class="img-right">
              </div>
              <div class="bottom-right">
                <span>2</span>/3
              </div>
            </div>
          </div>
        </div>
        <div class="news1">
          <div class="news-left">
            <img class="image3" src="../img/10-min.png" alt="" />
            <div class="none1">
              传承八一精神 凝聚奋进力量
            </div>
          </div>
          <div class="news-right">
            <div class="top">
              “为党育人 为国育才” ——9位法大教师倾情讲述育人故事
            </div>
            <div class="center">
              <div class="border"></div>
              <div class="time">2022-11-02</div>
            </div>
            <div class="bottom">
              三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契...
            </div>
            <div class="bottom-img">
              <div class="bottom-left">
                <img src="../img/4-min.png" alt="" class="img-left">
                <img src="../img/4-min.png" alt="" class="img-right">
              </div>
              <div class="bottom-right">
                <span>3</span>/3
              </div>
            </div>
          </div>
        </div>
        <div class="news2">
          <div class="content">
            <div class="left">
              <div class="left-top">
                “为党育人 为国育才” ——9位法大教师倾情讲述育
              </div>
              <div class="left-center">
                三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英...
              </div>
              <div class="left-right">
                <img src="../img/时间 钟表.png" alt="">
                2022-11-02
              </div>
            </div>
            <div class="center">
              <div class="left-top">
                “为党育人 为国育才” ——9位法大教师倾情讲述育
              </div>
              <div class="left-center">
                三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英...
              </div>
              <div class="left-right">
                <img src="../img/时间 钟表.png" alt="">
                2022-11-02
              </div>
            </div>
            <div class="right">
              <div class="left-top">
                “为党育人 为国育才” ——9位法大教师倾情讲述育
              </div>
              <div class="left-center">
                三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英...
              </div>
              <div class="left-right">
                <img src="../img/时间 钟表.png" alt="">
                2022-11-02
              </div>
            </div>
          </div>
          <div class="line"></div>
        </div>
        <div class="news3">
          查看更多<img src="../img/4-min.png" alt="">
        </div>
      </div>
    </div>
    <!-- 新闻公告结束 -->
    <!-- 党建引领开始 -->
    <div class="dangjian">
      <div class="dangjian-content">
        DANG JIAN YIN LING
        <div class="dangjiancolor">党建引领</div>
      </div>
      <div class="content-box">
        <div class="content">
          <div class="top">
            <img src="../img/5-min.png" alt="">
          </div>
          <div class="bottom">
            <div class="bottom-left">
              <div>02</div>
              <div>2022-11</div>
            </div>
            <div class="bottom-right">
              关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
            </div>
          </div>
          <div class="back"></div>
        </div>
        <div class="content">
          <div class="top">
            <img src="../img/5-min.png" alt="">
          </div>
          <div class="bottom">
            <div class="bottom-left">
              <div>02</div>
              <div>2022-11</div>
            </div>
            <div class="bottom-right">
              关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
            </div>
          </div>
        </div>
        <div class="content">
          <div class="top">
            <img src="../img/5-min.png" alt="">
          </div>
          <div class="bottom">
            <div class="bottom-left">
              <div>02</div>
              <div>2022-11</div>
            </div>
            <div class="bottom-right">
              关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
            </div>
          </div>
        </div>
      </div>
      <div class="news3">
        查看更多<img src="../img/4-min.png" alt="">
      </div>
    </div>
    <!-- 党建引领结束 -->
    <!-- 教研动态开始 -->
    <div class="jiaoyan">
      <div class="jiaoyan-box">
        <div class="jiaoyan-content">
          JIAOYANDONGTAI
          <div class="jiaoyancolor">教研动态</div>
        </div>
        <div class="content">
          <div class="jiaoyan-left">
            <div class="img">
              <img src="../img/6-min.png" alt="">
            </div>
            <div class="font">
              <p class="one">“为党育人 为国育才”</p>
              <p class="two">中餐学院开展思廉日党课专题活动</p>
            </div>
          </div>
          <div class="jiaoyan-right">
            <ul>
              <li>
                <div class="flex">
                  <div>“为党育人 为国育才”</div>
                  <div>2022-11-2</div>
                </div>
              </li>
              <li>
                <div class="flex">
                  <div>“为党育人 为国育才”</div>
                  <div>2022-11-2</div>
                </div>
              </li>
              <li>
                <div class="flex">
                  <div>“为党育人 为国育才”</div>
                  <div>2022-11-2</div>
                </div>
              </li>
              <li>
                <div class="flex">
                  <div>“为党育人 为国育才”</div>
                  <div>2022-11-2</div>
                </div>
              </li>
              <li>
                <div class="flex">
                  <div>“为党育人 为国育才”</div>
                  <div>2022-11-2</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="news3">
        查看更多<img src="../img/4-min.png" alt="">
      </div>
    </div>
    <!-- 教研动态结束 -->
    <!-- 社会服务开始 -->
    <div class="shehuifuwu">
      <div class="shehui-content">
        SHEHUIFUWU
        <div class="shehuicolor">社会服务</div>
      </div>
      <div class="fuwu-content">
        <div class="shehui-left">
          <div class="img">
            <img src="../img/10-min.png" alt="">
          </div>
          <div class="font">
            <div class="top">
              形势与政策报告会之“新东欧地缘政治冲突及...
            </div>
            <div class="center">
              形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘政治冲突及...
            </div>
            <div class="right">
              <img src="../img/11-min.png" alt="">
              <div>2022-09-29</div>
            </div>
          </div>
        </div>
        <div class="shehui-right">
          <div class="hongguan">
            <img src="../img/8-min.png" alt="">
            <div>红馆</div>
          </div>
          <div class="xinli">
            <img src="../img/9-min.png" alt="">
            <div>心理健康中心</div>
          </div>
        </div>
      </div>
      <div class="news3">
        查看更多<img src="../img/4-min.png" alt="">
      </div>
    </div>
    <!-- 社会服务结束 -->
    <!-- 主题活动开始 -->
    <div class="zhutihuodong">
      <div class="zhutihuodong-box">
        <div class="zhuti-content">
          ZHUTIHUODONG
          <div class="zhuticolor">主题活动</div>
        </div>
        <div class="content">
          <div class="box1">
            <div class="top">
              <div><img src="../img/12-min.png" alt=""></div>
              <div class="font">
                山东城院“五心工程”<br />温暖校园
              </div>
            </div>
            <div class="bottom">
              3月24日，一场别开生面的“平台通过网络直播的形式拉开序幕...
            </div>
          </div>
          <div class="box1">
            <div class="top">
              <div><img src="../img/13-min.png" alt=""></div>
              <div class="font">
                划重点！一图读懂山东<br />城院“十四五”发<br />展规划
              </div>
            </div>
            <div class="bottom">
              3月20日，烟台市高新区管委副主任李如鹏、市教育局高新区分局
            </div>
          </div>
          <div class="box1">
            <div class="top">
              <div><img src="../img/13-min.png" alt=""></div>
              <div class="font">
                划重点！一图读懂山东<br />城院“十四五”发<br />展规划
              </div>
            </div>
            <div class="bottom">
              3月20日，烟台市高新区管委副主任李如鹏、市教育局高新区分局
            </div>
          </div>
          <div class="box1">
            <div class="top">
              <div><img src="../img/13-min.png" alt=""></div>
              <div class="font">
                划重点！一图读懂山东<br />城院“十四五”发<br />展规划
              </div>
            </div>
            <div class="bottom">
              3月20日，烟台市高新区管委副主任李如鹏、市教育局高新区分局
            </div>
          </div>
        </div>
        <div class="news3">
          查看更多<img src="../img/4-min.png" alt="">
        </div>
      </div>
    </div>
    <!-- 主题活动结束 -->
    <!-- 马院风采开始 -->
    <div class="box5">
      <div class="mayuan-content">
        MA YUAN FENG CAI
        <div class="mayuancolor">马院风采</div>
      </div>
      <div class="box5center">
        <div class="swiper mySwiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../img/20.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/22.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/23.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/24.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/25.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/26.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/27.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/28.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/29.jpg" alt=""></div>
          </div>
        </div>
      </div>
      <div class="box5-content">
        <div class="img1"><img src="../img/20.jpg" alt=""></div>
        <div class="img1"><img src="../img/21.jpg" alt=""></div>
        <div class="img1"><img src="../img/22.jpg" alt=""></div>
        <div class="img1"><img src="../img/23.jpg" alt=""></div>
      </div>
      <div class="box5bottom">
        <text class="box5bottom1">友情链接：</text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
        <text class="box5bottom2"><a href="#">山东教育局</a></text>
      </div>
      <div class="news3">
        查看更多<img src="../img/4-min.png" alt="">
      </div>
    </div>
    <!-- 马院风采结束 -->
    <!-- 尾部开始 -->
    <div class="foot">
      <div class="foot-content">
        <div class="foot-left">
          <img src="../img/2-min.png" alt="">
        </div>
        <div class="foot-center">
          <div class="center-left">地址：山东省烟台市高新区海天路1001号</div>
          <div class="center-right">办公室电话：0535-293876</div>
        </div>
        <div class="foot-right">
          <img src="../img/14.png" alt="">
        </div>
      </div>
      <div class="foot-bottom">
        Copyright©山东省城市服装技师学院版权所有
      </div>
    </div>
    <!-- 尾部结束 -->
  </div>
</body>
<script>
  var mySwiper = new Swiper('.swiper', {
    autoplay: {
      delay: 3000
    },
    loop: true, // 循环模式选项
    // 如果需要滚动条
    pagination: {
      el: '.swiper-pagination',
    },
  })
  var swiper = new Swiper(".mySwiper2", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    autoplay: {
      delay: 3000,
    },
  });
  $('.none').click(function () {
    var bElement = $('.uls');
    if (bElement.is(':visible')) {
      bElement.hide();
    } else {
      bElement.show();
    }
  });
  $(function () {
    $('.news1:first').show().siblings('.news1').hide()
    var index = 0;
    $('.img-right').click(() => {
      index++;
      console.log(index);
      if (index < 3) {
        $('.news1').eq(index).show().siblings('.news1').hide()
      } else {
        index = -1;
      }
    })
    $('.img-left').click(() => {
      index--;
      if (index >= 0) {
        $('.news1').eq(index).show().siblings('.news1').hide()
      } else {
        index = 3;
      }
    })
  })
</script>

</html>